import React, { Component } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Affix } from 'antd';

import styles from './index.less';
import memoryUtils from '@/utils/memoryUtils';
import { TITLE_FULL } from '@/utils/constants';

class BasicHeader extends Component {

  // handleClickMenu = (subSystem) => {
  //   if (subSystem.subSystemType === 'PAGE' || subSystem.subSystemType === 'USER') {
  //     router.push('/subSystem/' + subSystem.$handle);
  //   }
  // };

  render() {
    const { subSystems, location, dispatch } = this.props;
    // console.log('BasicHeader render()', subSystems, location);
    let $handle = '';
    if(location.pathname.startsWith('/subSystem1')) {
      const url = location.pathname.split('/');
      $handle = url[2];
      dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:'+ $handle}});
    }
    const active = {background: 'url("'+require('@/assets/images/a-dashboard-header-menu2.png')+'") no-repeat center center', backgroundSize:'100%'};
    return (
      <Affix offsetTop={0}>
        <div className={styles.dashboardHeader}>
          <div className={styles.header}>
            <div></div>
            <div className={styles.title}><span>{ TITLE_FULL }</span></div>
            <div className={styles.logout}>
              <div>
                {memoryUtils.user.username},
                <span onClick={()=>{window.open('/logout', '_self');}}> Logout</span>
              </div>
            </div>
          </div>
          <img className={styles.line} alt='dashboard-header-line'
               src={require('@/assets/images/a-dashboard-horizontal-line.png')}/>
          <ul className={styles.navMenus}>
            {
              subSystems.map((subSystem, index) => {
                const path = ((subSystem.modules.length < 2)?'/subSystem1/':'/subSystem/') + subSystem.$handle;
                if($handle==subSystem.$handle) {
                  return (
                    <Link to={path}>
                      <li className={styles.navMenu} style={active} key={index}>
                        {subSystem.title}
                      </li>
                    </Link>
                  );
                } else {
                  return (
                    <Link to={path}>
                      <li className={styles.navMenu} key={index}>
                        {subSystem.title}
                      </li>
                    </Link>
                  );
                }
              })
            }
          </ul>
        </div>
      </Affix>
    );
  }
}

export default connect(({ tlsWebServer }) => ({
  ...tlsWebServer,
}))(withRouter(BasicHeader));
